<template>
    <div class="schoolList pl10 pr10 flex-col">
        <!-- 快捷搜索 -->
        <el-tabs v-model="tabIndex" @tab-click="clickTabs" :style="{ height: tabbars.length > 0 ? '56px' : '30px' }">
            <el-tab-pane :label="tab.name + (tab.num ? `(${tab.num})` : '')" :key="tabI" v-for="(tab, tabI) in tabbars"></el-tab-pane>
        </el-tabs>

        <avue-crud
            :table-loading="loading"
            ref="crud"
            :option="option"
            :search.sync="searchForm"
            :page.sync="page"
            :data="data"
            @on-load="onLoad"
            @search-change="handleSearchChange"
            :before-open="beforeOpen"
            @row-save="handleRowSave"
            @row-update="handleRowUpdate"
            @error="error"
        >
            <!-- 搜索 -->
            <template slot="stdateSearch">
                <el-date-picker
                    v-model="searchForm.date"
                    type="daterange"
                    align="right"
                    value-format="timestamp"
                    unlink-panels
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="scPickerOptions"
                >
                </el-date-picker>
            </template>
        </avue-crud>
    </div>
</template>
<script>
export default {
    name: "",
    data() {
        return {
            tabIndex: 0,
            tabbars: [
                { name: "全部", num: 1000 },
                { name: "进行中", num: 500 },
                { name: "已过期", num: 500 }
            ],

            // 表格数据
            data: [],
            option: {
                //全局avue options设置
                ...window.avueCrud,
                addBtnText: "添加按钮文案",
                addTitle: "添加弹窗文案",
                viewBtn: true, //查看按钮
                editBtn: true, //编辑按钮
                delBtn: true,
                // 列设置
                column: [
                    {
                        label: "学校",
                        prop: "school",
                        searchSpan: 4, //input框宽度
                        searchOrder: 2,
                        searchLabelWidth: 50, //label宽度
                        search: true,
                        type: "select",
                        props: {
                            label: "label",
                            value: "value"
                        },
                        dicData: [
                            {
                                label: "惠阳一中",
                                value: 0
                            },
                            {
                                label: "惠阳半岛",
                                value: 1
                            }
                        ],
                        // dicUrl: "",  //请求字典url
                        // dicFlag: false, //表格打开表单的时候是否重新拉取字典
                        // dicMethod: "get",
                        // dicQuery: {} // 字典请求参数
                        rules: [
                            //新增 编辑校验
                            {
                                required: true,
                                message: "请选择学校",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "班级",
                        prop: "class",
                        searchOrder: 3,
                        searchSpan: 4,
                        searchLabelWidth: 50,
                        search: true,
                        type: "select",
                        props: {
                            label: "label",
                            value: "value"
                        },
                        dicData: [
                            {
                                label: "七年级一班",
                                value: 0
                            },
                            {
                                label: "八年级二班",
                                value: 1
                            }
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请选择班级",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "标题",
                        prop: "title"
                    },
                    {
                        label: "日期",
                        prop: "stdate",
                        search: true,
                        searchslot: true
                    }
                ]
            },

            searchForm: {
                school: "",
                date: null
            }
        };
    },
    methods: {
        // 表格初始化
        onLoad(page) {
            this.$message.success("分页信息:" + JSON.stringify(page));
            this.page.total = 20;
            this.data = [
                {
                    id: 0,
                    school: "惠阳半岛",
                    class: "一年级一班",
                    title: "标题",
                    stdate: "2021-12-12 23:23:22"
                },
                {
                    id: 1,
                    school: "惠阳半岛",
                    class: "一年级一班",
                    title: "标题",
                    stdate: "2021-12-12 23:23:22"
                },
                {
                    id: 2,
                    school: "惠阳半岛",
                    class: "一年级一班",
                    title: "标题",
                    stdate: "2021-12-12 23:23:22"
                },
                {
                    id: 3,
                    school: "惠阳半岛",
                    class: "一年级一班",
                    title: "标题",
                    stdate: "2021-12-12 23:23:22"
                }
            ];
        },
        // 搜索事件
        handleSearchChange(params, done) {
            done();
            this.$message.success(JSON.stringify(params));
        },
        // 错误提示
        error(err) {
            this.$message.success("请查看控制台");
            console.log(err);
        },
        // 新增
        handleRowSave(form, done) {
            this.$message.success("新增数据" + JSON.stringify(form));
            done();
        },
        // 编辑
        handleRowUpdate(form, index, done, loading) {
            this.$message.success("编辑数据" + JSON.stringify(form) + "数据序号" + index);
            setTimeout(() => {
                loading();
                this.$message.success("3秒后关闭表单");
            }, 1000);
            setTimeout(() => {
                done();
            }, 1500);
        },
        // 编辑之前
        beforeOpen(done) {
            done();
            setTimeout(() => {
                this.$message.success("查看控制台");
            }, 0);
        },
        // 加载数据
        clickTabs(tab, event) {
            let status = "";
            switch (+tab.index) {
                case 0:
                    status = 0;
                    break;
                case 1:
                    status = 1;
                    break;
                case 2:
                    status = 2;
                    break;
                default:
                    status = 0;
                    break;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.schoolList {
}
</style>
